<div id="containter" class="clearfix" style="margin-right:200px;">
    <div class="content-left">
        <div class="chat-above" id="above">
            <div class="clearfix message connect-message">
				<span id="connect-message" style="background-color:#FFFFFF;color:#4665d4;">
					<a href="javascript:void(0)" style="color:#4665d4;">
						<i class="layui-icon">&#xe63a;</i>
						查看更多消息
					</a>
				</span>
            </div>
            <#if chatMessageList?? && chatMessageList.content>
                <#list chatMessageList.content?reverse as chatMessage>
                    <#if chatMessage.calltype == "out">
                        <div class="clearfix chat-block">
                            <div class="chat-right">
                                <img class="user-img" src="/im/img/user.png" alt="">
                                <div class="chat-message">
                                    <label class="time">${chatMessage.createtime!''}</label>
                                    <label class="user">${user.uname!''}</label>
                                </div>
                                <div class="chatting-right">
                                    <i class="arrow"></i>
                                    <div class="chat-content">${(chatMessage.message!'')?no_esc}</div>
                                </div>
                            </div>
                        </div>
                    <#else>
                        <div class="clearfix chat-block">
                            <div class="chat-left">
                                <img class="user-img" src="/im/img/user.png" alt="">
                                <div class="chat-message">
                                    <label class="user">${entimuser.uname!''}</label>
                                    <label class="time">${chatMessage.createtime!''}</label>
                                </div>
                                <div class="chatting-left">
                                    <i class="arrow"></i>
                                    <div class="chat-content">${(chatMessage.message!'')?no_esc}</div>
                                </div>
                            </div>
                        </div>
                    </#if>
                </#list>
            </#if>
        </div>
        <div class="chat-bottom" id="bottom">
            <textarea id="message" name="content" style="visibility:hidden;"></textarea>
            <div class="btn-push clearfix">
                <div style="float:left;height:24px;line-height:34px;margin: 5px 20px 10px 5px;" id="surplus">0/200</div>
                <button type="button" class="send-btn active special  clearfix" id="sent" onclick="sendMessage()"
                        style="background-color:#32c24d;font-weight: 200;padding:5px;">
                    发送
                </button>
            </div>
        </div>
    </div>
    <div class="content-rig">
        <div class="content-head">
            <p>用户信息</p>
        </div>
        <div class="content-list">
            <ul>
                <li>
                    <p>姓名：${entimuser.uname!''}</p>
                </li>
                <#if organ??>
                    <li>
                        <p>部门：${organ.name!''} </p>
                    </li>
                </#if>
                <li>
                    <p>邮件：${entimuser.email!''}</p>
                </li>
                <li>
                    <p>电话：${entimuser.mobile!''}</p>
                </li>
            </ul>
        </div>
        <div class="content-bottom">
			<span id="welcome-message">
				<p>欢迎使用SUKeFU企业IM</p>
				<p>QQ群：暂无</p>
				<p>SUKeFU企业IM</p>
				<p>详情查看：<a href="http://www.ukewo.cn" target="_blank" style="color:#32c24d;">doc & Wiki</a></p>
			</span>
        </div>
    </div>
</div>
<script type="text/javascript">
    var editor, words;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            autoHeightMode: false,
            width: "100%",
            resizeType: 0,
            themeType: 'simple',
            fontsize: 14,
            newlineTag: "br",
            filterMode: true,
            items: ['emoticons', 'cut'],
            afterChange: function () {
                var count = this.count();

                words = this.count("text");
                var pattern = '字数：' + words + '字';
                document.getElementById('surplus').innerHTML = "字符： " + count + "  ，文字：" + pattern; //输入显示
                ////////
            },
            afterCreate: function () { //设置编辑器创建后执行的回调函数
                var self = this;
                //Ctrl+Enter提交表单
                K.ctrl(document, 13, function () {
                    self.sync();
                    sendMessage();
                });
                K.ctrl(self.edit.doc, 13, function () {
                    self.sync();
                    sendMessage();
                });
            }
        });
    });
    KindEditor.options.cssData = "body { font-size: 15px; font-family:'Microsoft Yahei', 'Helvetica', 'Simsun', 'Arial';}";
    var R3Ajax = {
        ajax: function (opt) {
            var xhr = this.createXhrObject();
            xhr.onreadystatechange = function () {
                if (xhr.readyState != 4) return;
                (xhr.status === 200 ?
                    opt.success(xhr.responseText, xhr.responseXML) :
                    opt.error(xhr.responseText, xhr.status));
            }
            xhr.open(opt.type, opt.url, true);
            if (opt.type !== 'post')
                opt.data = null;
            else
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            opt.data = this.parseQuery(opt.data);
            xhr.send(opt.data);
        },
        post: function (url, success, data) {
            var popt = {
                url: url,
                type: 'post',
                data: data,
                success: success,
                error: function (data) {
                }
            }
            this.ajax(popt);
        },
        get: function (url, success) {
            var gopt = {
                url: url,
                type: 'get',
                success: success,
                error: function () {
                }
            }
            this.ajax(gopt);
        },
        createXhrObject: function () {
            var methods = [
                function () {
                    return new XMLHttpRequest();
                },
                function () {
                    return new ActiveXObject('Msxml2.XMLHTTP');
                },
                function () {
                    return new ActiveXObject('Microsoft.XMLHTTP');
                }
            ];
            for (var i = 0; len = methods.length, i < len; i++) {
                try {
                    methods[i]();
                } catch (e) {
                    continue;
                }
                this.createXhrObject = methods[i];
                return methods[i]();
            }
            throw new Error('Could not create an XHR object.');
        },
        parseQuery: function (json) {
            if (typeof json == 'object') {
                var str = '';
                for (var i in json) {
                    str += "&" + i + "=" + encodeURIComponent(json[i]);
                }
                return str.length == 0 ? str : str.substring(1);
            } else {
                return json;
            }
        }
    };
    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }
    var R3Helper = {
        resize: function () {
            var height = document.body.offsetHeight;
            document.getElementById('above').style.height = (height - 194 - 50) + "px";
        }
    }
</script>
<script>
    layui.use('element', function () {
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    });
    var hostname = location.hostname;
    var socket = io.connect(location.protocol + "//" + top.hostname + ":" + top.port + "/im/ent?userid=${user.id!''!''}&orgi=${user.orgi!''}&contextid=${contextid!''}");
    socket.on('message', function (data) {
        var chat = document.getElementsByClassName('chatting-left').innerText;
        chat = data.message;
        if (data.calltype == "out") {
            output('<div class="chat-right"> <img class="user-img" src="/im/img/user.png" alt=""><div class="chat-message"><label class="time">' + data.createtime + '</label><label  class="user">${user.uname!''}</label> </div><div class="chatting-right"><i class="arrow"></i><div class="chat-content">' + chat + '</div></div>', "chat-block");
        } else if (data.calltype == "in") {
            output('<div class="chat-left"> <img class="user-img" src="/im/img/user.png" alt=""><div class="chat-message"><label  class="user">${entimuser.uname!''}</label><label class="time">' + data.createtime + '</label> </div><div class="chatting-left"><i class="arrow"></i><div class="chat-content">' + chat + '</div></div>', "chat-block");
        }
    });
    socket.on('status', function (data) {
        if (data.contextid == '${entimuser.id}') {
            if (data.message == 'online') {
                top.$('#chat_${entimuser.id}').removeClass('offline').removeClass('online').addClass('online').attr('title', '在线');
            } else if (data.message == 'offline') {
                top.$('#chat_${entimuser.id}').removeClass('online').removeClass('offline').addClass('offline').attr('title', '离线');
            }
        }
    })

    function sendMessage() {
        editor.sync();
        var count = editor.count("text");
        if (count > 0) {
            var message = document.getElementById('message').value;
            if (message != "") {
                socket.emit('message', {
                    userid: "${user.id!''}",
                    type: "message",
                    session: "${user.id!''}",
                    touser: "${entimuser.id!''}",
                    contextid: "${user.id!''}",
                    orgi: "${user.orgi!''}",
                    message: message
                });
            }
            editor.html('');
        }
    }

    function output(message, clazz) {
        if (clazz == "message connect-message") {
            var messages = document.getElementsByClassName("connect-message");
            for (inx = 0; inx < messages.length;) {
                document.getElementById('above').removeChild(messages[inx]);
                inx++;
            }
        }
        var element = ("<div class='clearfix " + clazz + "'>" + " " + message + "</div>");
        document.getElementById('above').innerHTML = (document.getElementById('above').innerHTML + element);
        document.getElementById('above').scrollTop = document.getElementById('above').scrollHeight;
    }

    document.getElementById('above').scrollTop = document.getElementById('above').scrollHeight;
    <#if online?? && online == true>
    top.$('#chat_${entimuser.id}').removeClass('offline').addClass('online').attr('title', '在线');
    </#if>
</script>